﻿<template>
  <el-dialog
    :title="!dataForm.id ? '新建' : '编辑'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="SHZY-dialog SHZY-dialog_center"
    lock-scroll
    width="600px"
  >
    <el-row
      :gutter="15"
      class=""
    >
      <el-form
        ref="elForm"
        :model="dataForm"
        size="small"
        label-width="100px"
        label-position="right"
        :rules="rules"
      >
        <el-col :span="24">
          <el-form-item
            label="数据源编码"
            prop="code"
          >
            <el-input
              v-model='dataForm.code'
              placeholder='请输入'
              clearable
              maxlength="50"
              show-word-limit
              required
              :style='{"width":"100%"}'
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="数据源名称"
            prop="name"
          >
            <el-input
              v-model='dataForm.name'
              placeholder='请输入'
              clearable
              maxlength="50"
              show-word-limit
              required
              :style='{"width":"100%"}'
            >
            </el-input>
          </el-form-item>
        </el-col>
        <div class="mb-20">
          <el-alert
            title="默认打印的时候必须传业务主键@formId给SQL语句里面作为Where查询条件"
            type="warning"
            show-icon
            :closable="false"
          ></el-alert>
        </div>
        <el-col :span="24">
          <el-form-item
            label="数据连接"
            prop="dbLinkId"
          >
            <el-select
              v-model="dataForm.dbLinkId"
              placeholder="请选择数据库"
              clearable
            >
              <el-option-group
                v-for="group in dbOptions"
                :key="group.fullName"
                :label="group.fullName"
              >
                <el-option
                  v-for="item in group.children"
                  :key="item.id"
                  :label="item.fullName"
                  :value="item.id"
                />
              </el-option-group>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="SQL语句"
            prop="sqlTemplate"
          >
            <el-input
              type='textarea'
              :autosize="{ minRows: 3, maxRows: 10}"
              v-model='dataForm.sqlTemplate'
              placeholder='请输入SQL查询语句&存储过程语句'
              required
              :style='{"width":"100%"}'
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="有效标志"
            prop="enabledMark"
          >
            <el-switch
              v-model='dataForm.enabledMark'
              :active-value='1'
              :inactive-value='0'
            >
            </el-switch>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="visible=false">取 消</el-button>
      <el-button
        type="primary"
        @click="dataFormSubmit()"
        :loading="btnLoading"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {
  getPrintDataInfo,
  createPrintData,
  updatePrintData,
} from "@/api/common/printData";
import { getDataSourceListAll } from "@/api/systemData/dataSource";
export default {
  components: {},
  props: [],
  data() {
    return {
      btnLoading: false,
      loading: false,
      visible: false,
      dbOptions: [],
      dataForm: {
        id: "",
        code: undefined,
        name: undefined,
        dbLinkId: undefined,
        sqlTemplate: undefined,
        enabledMark: 1,
      },
      rules: {
        code: [
          {
            required: true,
            message: "请输入数据源编码",
            pattern: "[^ \\s]+",
            trigger: '"blur"',
          },
        ],
        name: [
          {
            required: true,
            message: "请输入数据源名称",
            pattern: "[^ \\s]+",
            trigger: '"blur"',
          },
        ],
        dbLinkId: [
          {
            required: true,
            message: "请选择数据连接",
            trigger: '"change"',
          },
        ],
        sqlTemplate: [
          {
            required: true,
            message: "请输入SQL语句",
            pattern: "[^ \\s]+",
            trigger: '"blur"',
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getDbOptions();
  },
  mounted() {},
  methods: {
    goBack() {
      this.$emit("refresh");
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          getPrintDataInfo(this.dataForm.id).then((res) => {
            res.data.sqlTemplate = JSON.parse(res.data.sqlTemplate).sql;
            this.dataForm = res.data;
          });
        }
        this.$store.commit("generator/UPDATE_RELATION_DATA", {});
      });
    },
    dataFormSubmit() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          let data = {
            ...this.dataForm,
            sqlTemplate: JSON.stringify({
              sql: this.dataForm.sqlTemplate,
            }),
          };

          if (!data.id) {
            createPrintData(data)
              .then((res) => {
                this.$message({
                  message: res.msg,
                  type: "success",
                  duration: 1000,
                  onClose: () => {
                    this.btnLoading = false;
                    (this.visible = false), this.$emit("refresh", true);
                  },
                });
              })
              .catch((res) => {
                this.btnLoading = false;
              });
          } else {
            updatePrintData(data)
              .then((res) => {
                this.$message({
                  message: res.msg,
                  type: "success",
                  duration: 1000,
                  onClose: () => {
                    this.btnLoading = false;
                    this.visible = false;
                    this.$emit("refresh", true);
                  },
                });
              })
              .catch((res) => {
                this.btnLoading = false;
              });
          }
        }
      });
    },
    getDbOptions() {
      getDataSourceListAll().then((res) => {
        const list = res.data.list || [];
        this.dbOptions = list.filter((o) => o.children && o.children.length);
      });
    },
  },
};
</script>
